<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/add.css"/>
    <script src="js/jquery-1.11.1.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body>
<div id="app">
    <div class="header">
        <span>添加用户</span>
    </div>
    <div class="content">
        <table>
            <tr>
                <td class="text-right">姓名</td>
                <td class="content_right"><input class="input" placeholder="请输入姓名" onblur="userTest()" ><button hidden disabled></button></td>
            </tr>
            <tr>
                <td class="text-right">手机号码</td>
                <td class="content_right"><input class="input" placeholder="请输入手机号码" onblur="phoneTest()"><button hidden disabled></button></td>
            </tr>
            <tr>
                <td class="text-right">身份证号码</td>
                <td class="content_right"><input class="input" placeholder="请输入身份证号码" onblur="cardIdTest()"><button hidden disabled></button></td>
            </tr>
            <tr>
                <td class="text-right">密码</td>
                <td class="content_right"><input class="input" placeholder="请输入密码" onblur="pwdTest()"><button hidden disabled></button></td>
            </tr>
            <tr>
                <td></td>
                <td class="content_right"><span class="btn btn-info" onclick="formSubmit()">立即提交</span> <span
                        class="btn" onclick="reset()">重置</span></td>
            </tr>
        </table>


    </div>
</div>


<script src="../../layer/layer.js"></script>
<script src="../../assets/layui.all.js"></script>
<script>
    function reset() {
        $("input").val("");
    }

    function formSubmit() {
        var windowId = layer.load(5);
        var name = $("input:eq(0)").val();
        var phone = $("input:eq(1)").val();
        var cardId = $("input:eq(2)").val();
        var pwd = $("input:eq(3)").val();
        $.post("/user/add.do", {
            name: name,
            phone: phone,
            cardId: cardId,
            pwd: pwd
        }, function (data) {
            layer.close(windowId);
            if (data["msgCode"] == 200) {
                layer.alert("新增成功！(*^▽^*)");
                location.href="/login.html";
            } else if (400 == data["msgCode"]) {
                layer.alert("新增失败了，o(╥﹏╥)o");
            }
        }, "json");
        return false;
    }
</script>
<script>
    function userTest () {
        var str = $("input:eq(0)").val();
        str=$.trim(str);
        var ret = /^[\u4e00-\u9fa5]{2,6}$/;
        if (!ret.test(str)) {
            $("button:eq(0)").html("姓名不合法或已存在！");
            $("button:eq(0)").css("display","inline-block");
            $("button:eq(0)").css("color","red");
            $("button:eq(0)").css("font-size","28");
            return;
        }
        $.getJSON("/user/findByUserName.do",{userName:str},function (data) {
            if(data["msgCode"]==400){
                $("button:eq(0)").html("正确");
                $("button:eq(0)").css("display","inline-block");
                $("button:eq(0)").css("color","green");
                $("button:eq(0)").css("font-size","28");
            }
        });
    }
    function phoneTest () {
        var str = $("input:eq(1)").val();
        str=$.trim(str);
        var ret = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
        if (!ret.test(str)) {
            $("button:eq(1)").html("手机号不合法或已存在！");
            $("button:eq(1)").css("display","inline-block");
            $("button:eq(1)").css("color","red");
            $("button:eq(1)").css("font-size","28");
            return;
        }
        $.getJSON("/user/findByPhone.do",{phone:str},function (data) {
            if(data["msgCode"]==400){
                $("button:eq(1)").html("正确");
                $("button:eq(1)").css("display","inline-block");
                $("button:eq(1)").css("color","green");
                $("button:eq(1)").css("font-size","28");
            }
        });
    }
    function cardIdTest () {
        var str = $("input:eq(2)").val();
        str=$.trim(str);
        var ret = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (!ret.test(str)) {
            $("button:eq(2)").html("身份证不合法(正确：应为15位、18位数字)或已存在");
            $("button:eq(2)").css("display","inline-block");
            $("button:eq(2)").css("color","red");
            $("button:eq(2)").css("font-size","28");
            return;
        }
        $.getJSON("/user/findByCardId.do",{cardId:str},function (data) {
            if(data["msgCode"]==400){
                $("button:eq(2)").html("正确");
                $("button:eq(2)").css("display","inline-block");
                $("button:eq(2)").css("color","green");
                $("button:eq(2)").css("font-size","28");
            }
        });
    }
    function pwdTest () {
        var str = $("input:eq(3)").val();
        str=$.trim(str);
        var ret =  /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,15}$/;
        if (!ret.test(str)) {
            $("button:eq(3)").html("密码不合法（正确：必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8-15之间）");
            $("button:eq(3)").css("display","inline-block");
            $("button:eq(3)").css("color","red");
            $("button:eq(3)").css("font-size","28");
            return;
        }
        $("button:eq(3)").html("正确");
        $("button:eq(3)").css("display","inline-block");
        $("button:eq(3)").css("color","green");
        $("button:eq(3)").css("font-size","28");
    }
</script>
</body>
</html>